<template>
    <div class="login-container">
        <van-nav-bar left-arrow @click-left="$router.back()" title="校园超市"
            >
            <template #right>
                <van-icon color="red" @click="$router.push('/index')" name="shop-o" size="20" />
            </template>
        </van-nav-bar>
        <h3 class="title">账号注册</h3>
        <van-form @submit="reg">
            <van-field :maxlength="11"
                :rules="[{ required: true, message: '请输入手机号' }, { pattern: telPattern, message: '请输入合法的手机号' }]"
                v-model="phone" placeholder="请输入手机号" />
            <van-field :rules="[{ required: true, message: '请输入昵称' }]" v-model="nickname" placeholder="请输入昵称" />
            <van-field :rules="[{ required: true, message: '请输入密码' }]" type="password" v-model="password"
                placeholder="请输入密码" />
            <van-button block round color="red">立即注册</van-button>
        </van-form>

        <router-link class="link" to="/login">
            已有账号,立即登录
        </router-link>
    </div>
</template>
    
<script>
export default {
    data() {
        return {
            // 默认账号和密码
            phone: "",
            nickname: "",
            password: "",
            telPattern: /^1[3456789]\d{9}$/
        }
    },
    methods: {
        reg() {
            const { phone, nickname, password } = this;
            this.$axios.post('/register', { phone, nickname, password }).then(res => {
                this.$toast(res.msg);
                if (res.code == 200) {
                    // 自动跳转到登录页面
                    this.$router.push('/login');
                }
            });
        }
    }
}
</script>
    
<style>
.login-container {
    padding: 10px;
}

.login-container h3 {
    font-size: 30px;
    color: #444;
    font-weight: normal;
    margin: 30px 0;
    text-align: center;
}

.login-container .van-cell {
    background: #f2f2f2;
    border-radius: 20px;
    margin: 20px 0;
}

.link {
    margin: 15px;
    font-size: 14px;
    display: block;
    color: #333;
    text-align: center;
}
</style>